<template>
	<!-- 巡检 -->
	<view class="wrap">
		<view>
			<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="true"
				swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="flex:1;">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" >
					<patrol-item v-for="(item,index) in unCheckRecords" :key="index" :patrolItem="item"></patrol-item>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" >
					<patrol-item v-for="(item,index) in checkedRecords" :key="index" :patrolItem="item"></patrol-item>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import patrolItem from './components/patrol-item.vue'
	export default{
		components:{
			patrolItem
		},
		data(){
			return{
				tabList:[{name:'未检'},{name:'已检'}],
				current:0,
				swiperCurrent:0,
				unCheckRecords:[
					{
						title:'设备A1',
						person:'李工',
						startTiem:'2021-6-21 10:50:22',
						endTime:'2021-6-21 11:30:00',
						faultCount:2,
						check:false
					},
					{
						title:'设备A2',
						person:'李工',
						startTiem:'2021-6-21 10:50:22',
						endTime:'2021-6-21 11:30:00',
						faultCount:2,
						check:false
					},
					{
						title:'设备A3',
						person:'李工',
						startTiem:'2021-6-21 10:50:22',
						endTime:'2021-6-21 11:30:00',
						faultCount:2,
						check:false
					},
					{
						title:'设备A4',
						person:'李工',
						startTiem:'2021-6-21 10:50:22',
						endTime:'2021-6-21 11:30:00',
						faultCount:2,
						check:false
					},
					{
						title:'设备A6',
						person:'李工',
						startTiem:'2021-6-21 10:50:22',
						endTime:'2021-6-21 11:30:00',
						faultCount:2,
						check:false
					},
				],
				checkedRecords:[
					{
						title:'设备A1',
						person:'李工',
						startTiem:'2021-6-21 10:50:22',
						endTime:'2021-6-21 11:30:00',
						faultCount:2,
						check:true
					},
					{
						title:'设备A2',
						person:'李工',
						startTiem:'2021-6-21 10:50:22',
						endTime:'2021-6-21 11:30:00',
						faultCount:2,
						check:true
					},
					{
						title:'设备A3',
						person:'李工',
						startTiem:'2021-6-21 10:50:22',
						endTime:'2021-6-21 11:30:00',
						faultCount:2,
						check:true
					},
					{
						title:'设备A4',
						person:'李工',
						startTiem:'2021-6-21 10:50:22',
						endTime:'2021-6-21 11:30:00',
						faultCount:2,
						check:true
					},
					{
						title:'设备A6',
						person:'李工',
						startTiem:'2021-6-21 10:50:22',
						endTime:'2021-6-21 11:30:00',
						faultCount:2,
						check:true
					},
				]
			}
		},
		props:{
			// tabUnCheck(){
			// 	console.log('tabUnCheck========',`未检(${this.unCheckRecords.length})`)
			// 	return `未检(${this.unCheckRecords.length})`
			// },
			// tabChecked(){
			// 	return `已检(${this.checkedRecords.length})`
			// },
		},
		
		methods:{
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
		}
	}
	
</script>

<style scoped lang="scss">
	.wrap{
		display: flex;
		flex-direction: column;
		height: calc(100vh);
	}
</style>
